<template>

	<view class="container">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="cell" @click="tiaozhuan">
				<van-cell value=">">
					<template #title>
						<view class="neirong">
							<view class="tubiao">
								<van-icon name="user-circle-o" />
							</view>
							<view class="youce">
								<view class="name">
									姓名：mhh
								</view>
								<view class="dizhi">
									地址：{{dizhiArr[0].province}}{{dizhiArr[0].city}}{{dizhiArr[0].area}}{{dizhiArr[0].addr}}
								</view>
							</view>

						</view>

					</template>
				</van-cell>
			</view>

			<view class="xinxi">
				<view class="shangpin">
					<view class="shangpintop">
						<view class="shangpinimg">
							<image :src="img" mode=""></image>
						</view>
						<view class="shangpinxinxi">
							<view class="shangpinxinxileft">
								<view class="shangpinxinxilefttop">

									<view class="topzi">
										{{v1}}{{v2}} {{v3}} {{skuName}}
									</view>
									<view class="bottomzi">
										{{brief}}
									</view>
								</view>
								<view class="shangpinxinxileftbottom">
									￥{{price}}
								</view>
							</view>
							<view class="shangpinxinxiright">
								x{{confirm.orderItem.prodCount}}
							</view>
						</view>
					</view>
					<view class="shangpinbottom">
						<van-stepper :value="confirm.orderItem.prodCount" @change="onChange" />
						<view class="youfei">
							邮费:0元
						</view>
					</view>

				</view>
			</view>

			<view class="zhongjian">
				<view class="zhongjianitem">
					<van-cell value="">
						<template #title>
							<view>
								订单备注 <text class="huiti">请输入备注信息</text>
							</view>

						</template>
					</van-cell>
				</view>
				<view class="zhongjianitem">
					<van-cell value="暂无可用>">
						<template #title>
							<view>
								优惠劵
							</view>
						</template>
					</van-cell>
				</view>

			</view>

			<view class="xiafang">
				<view class="xiafangitem">
					<van-cell :value="value">
						<template #title>
							<view>
								总金额
							</view>

						</template>
					</van-cell>
				</view>

				<view class="xiafangitem">
					<van-cell value=0>
						<template #title>
							<view>
								优惠金额
							</view>
						</template>
					</van-cell>
				</view>
				<view class="xiafangitem">
					<van-cell value=0>
						<template #title>
							<view>
								优惠金额
							</view>
						</template>
					</van-cell>
				</view>
				<view class="xiafangitem">
					<van-cell :value="zongshu">
						<template #title>
							<view>
								商品总数
							</view>
						</template>
					</van-cell>
				</view>
				<view class="xiafangitem">
					<van-cell :value="value">
						<template #title>
							<view>
								支付金额
							</view>
						</template>
					</van-cell>
				</view>
			</view>


			<view class="dibu">
				<van-submit-bar button-text="提交订单" @submit="onClickButton">

					<view class="heji">
						合计: <text class="jiagexiaoshu">￥</text> <text class="jiagezheng">{{value}}</text>
					</view>



					<!-- <view slot="price">3050</view> -->
				</van-submit-bar>
			</view>
			<van-dialog id="van-dialog" title="支付" @close="close" message="支付成功" :show="isshow" overlay
				show-confirm-button=true show-cancel-button=true>

			</van-dialog>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getDizhi,
	} from "../../../utils/goumai.js"
	import {
		goumai,
		gethao
	} from '../../../api/goumai.js'
	import {
		jiesuan
	} from "../../../api/goumai.js"
	export default {
		data() {
			return {
				dizhiArr: [],
				isshow: false,
				confirm: {
					basketIds: [
						0
					],
					orderItem: {
						prodId: 0,
						skuId: 0,
						prodCount: 1,
						shopId: 0,
						distributionCardNo: ""
					},
					addrId: 0,
					userChangeCoupon: 0,
					couponIds: [
						0
					]
				},
				v1: "",
				v2: "",
				v3: "",
				img: "",
				price: 0,
				brief: "",
				value: 0,
				zongshu: 1,
				skuName: "",
				shopId: 0,
				prodId: 0,
				skuId: 0,
				prodCount: 0,
				basketIdArr: [],
				orderNumbers: 0
			};
		},
		onLoad(options) {
			let brief = options.brief
			let price = options.price
			let v1 = options.xianshivalue1
			let v2 = options.xianshivalue2
			let v3 = options.xianshivalue3
			let imgarr = options.imgarr
			let skuName = options.skuname
			let shopId = options.shopId
			let prodId = options.prodId
			let skuId = options.skuId
			let prodCount = options.prodCount
			let basketIdArr = options.basketIdArr
			// console.log(options.brief,"brief")
			// console.log(options.price,"price")
			// console.log(options.xianshivalue1,"xianshivalue1")
			// console.log(options.xianshivalue2,"xianshivalue2")
			// console.log(options.xianshivalue3,"xianshivalue3")
			// console.log(options.imgarr,"imgarr")
			// console.log(options.index,"index")
			// console.log(arr,"arr")
			this.v1 = v1
			this.v2 = v2
			this.v3 = v3
			this.img = imgarr
			this.price = price
			this.brief = brief
			this.value = price
			this.skuName = skuName
			this.shopId = shopId
			this.prodId = prodId
			this.skuId = skuId
			this.prodCount = prodCount
			this.basketIdArr = basketIdArr

		},
		onShow() {
			this.GETDIZHI()
			this.GETHAO()

		},

		methods: {
			async GETDIZHI() {
				let result = await getDizhi()
				this.dizhiArr = result.data.data
				console.log(this.dizhiArr, "dizhiarr")
				this.GETjiesuan()
			},
			tiaozhuan() {
				uni.navigateTo({
					url: "/pages/dizhiliebiao/dizhiliebiao/dizhiliebiao"
				})
			},

			onChange(event) {
				this.confirm.orderItem.prodCount = event.detail
				this.zongshu = event.detail
				this.value = this.price * this.zongshu
			},
			onClickButton() {
				console.log("点击提交")
				this.isshow = !this.isshow
				console.log(this.orderNumbers,"ordernumbers")
				let result = goumai({
					orderNumbers: this.orderNumbers,
					payType: 0
				}).then((res) => {
					console.log("成功goumai", res)
				}).catch((err) => {
					console.log("失败goumai", err)
				})

			},
			close() {
				this.isshow = false
			},
			async GETjiesuan() {
				console.log(this.basketIdArr, 'basketIdArr')
				console.log(this.prodId, 'prodId')
				console.log(this.skuId, 'skuId')
				console.log(this.prodCount, 'prodCount')
				console.log(this.shopId, 'shopId')
				console.log(this.dizhiArr[0].addrId, 'addrId')
				let result = await jiesuan({
					basketIds: [this.basketIdArr],
					orderItem: {
						prodId: this.prodId,
						skuId: this.skuId,
						prodCount: this.prodCount,
						shopId: this.shopId,
						distributionCardNo: ""
					},
					addrId: this.dizhiArr[0].addrId,
					userChangeCoupon: 0,
					couponIds: [
						0
					]
				}).then((res) => {
					console.log("获取成功", res)
				}).catch((err) => {
					console.log("失败", err)
				})




				// let result = await jiesuan({
				// 	basketIds: [
				// 		979
				// 	],
				// 	orderItem: {
				// 		prodId: 69,
				// 		skuId: 394,
				// 		prodCount: 1,
				// 		shopId: 1,
				// 		distributionCardNo: ""
				// 	},
				// 	addrId: this.dizhiArr[0].addrId,
				// 	userChangeCoupon: 0,
				// 	couponIds: [
				// 		0
				// 	]
				// }).then((res) => {
				// 	console.log("获取成功", res)
				// }).catch((err) => {
				// 	console.log("失败", err)
				// })









			},

			async GETHAO() {
				let result = await gethao({
					shopId: this.shopId,
					remarks: 'string'
				})
				console.log(result, "result")
				this.orderNumbers = result.data.data.orderNumbers
				console.log(this.orderNumbers)
			},


		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.cell {
			.neirong {
				display: flex;
				width: 600rpx;

				.tubiao {
					width: 10%;
					margin-right: 20rpx;
				}

				.youce {
					width: 90%;

					display: flex;
					flex-direction: column;

					.name {}

					.dizhi {}
				}

			}
		}

		.shangpin {
			display: flex;
			flex-direction: column;
			margin-top: 50rpx;

			.shangpintop {
				display: flex;

				.shangpinimg {
					width: 35%;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 200rpx;
						height: 200rpx;


					}
				}

				.shangpinxinxi {
					width: 65%;

					display: flex;

					.shangpinxinxileft {
						width: 75%;

						display: flex;
						flex-direction: column;

						.shangpinxinxilefttop {
							height: 80%;

							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.topzi {
								font-weight: 700;
							}

							.bottomzi {
								font-size: 30rpx;
							}
						}

						.shangpinxinxileftbottom {
							height: 25%;

							text-align: center;
						}
					}

					.shangpinxinxiright {
						width: 20%;
						padding-top: 150rpx;
						text-align: center;
					}
				}
			}

			.shangpinbottom {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				height: 100rpx;
				padding-left: 500rpx;
			}
		}

		.zhongjian {
			display: flex;
			flex-direction: column;

			.zhongjianitem {

				.huiti {
					margin-left: 70rpx;
					color: #808080;
				}
			}
		}

		.xiafang {
			.xiafangitem {}
		}

		.dibu {
			display: flex;
			align-items: center;
			margin-top: 120rpx;

			.anniu {
				display: flex;
				align-items: center;

			}

			.heji {
				margin-left: 70rpx;
				margin-right: 10rpx;
				display: flex;
				align-items: center;

				.jiagezheng {
					color: red;
					font-size: 50rpx;
				}

				.jiagexiaoshu {
					color: red;
					font-size: 30rpx;
				}
			}

		}
	}
</style>